<template>
  <view class="login-container">
    <!-- 顶部标题 -->
    <view class="header">
      <text class="welcome">欢迎登录</text>
      <text class="sub-title">请使用手机号完成登录</text>
    </view>
    
    <!-- 手机号区域 -->
    <view class="phone-section">
      <view v-if="phoneNumber" class="phone-info">
        <text class="phone">{{ formatPhone(phoneNumber) }}</text>
        <text class="tip">当前手机号</text>
      </view>
      
      <view v-else class="manual-input">
        <view class="input-item">
          <text class="prefix">+86</text>
          <input 
            type="number"
            v-model="inputPhone"
            placeholder="请输入手机号"
            maxlength="11"
          />
        </view>
        <view class="input-item" v-if="showVerifyCode">
          <input
            type="number"
            v-model="verifyCode"
            placeholder="请输入验证码"
            maxlength="6"
          />
          <text 
            class="verify-btn"
            :class="{ disabled: countDown > 0 }"
            @click="sendVerifyCode"
          >
            {{ countDown > 0 ? `${countDown}s后重发` : '获取验证码' }}
          </text>
        </view>
      </view>
    </view>
    
    <!-- 登录按钮 -->
    <button 
      class="login-btn"
      :disabled="!isPrivacyAgreed"
      @click="handleLogin"
    >
      {{ phoneNumber ? '一键登录' : '登录' }}
    </button>
    
    <!-- 隐私协议 -->
    <view class="privacy-agreement">
      <checkbox-group @change="handlePrivacyChange">
        <checkbox 
          value="agreed"
          :checked="isPrivacyAgreed"
          color="#007AFF"
        />
      </checkbox-group>
      <view class="agreement-text">
        <text>我已阅读并同意</text>
        <text class="link" @click="showPrivacyPopup">《隐私政策》</text>
        <text>和</text>
        <text class="link" @click="showUserAgreement">《用户协议》</text>
      </view>
    </view>
    
    <!-- 隐私协议弹窗 -->
    <view class="privacy-popup" v-if="showPrivacy">
      <view class="popup-content">
        <view class="popup-title">隐私政策</view>
        <scroll-view class="popup-body" scroll-y>
          <text class="privacy-text">
            尊敬的用户，欢迎使用我们的应用。
            我们非常重视您的个人信息和隐私保护。为了更好地保护您的个人权益，在使用我们的产品前，请您认真阅读并了解以下内容：

            1. 手机号码的收集与使用
            我们需要收集您的手机号码用于：
            - 账号登录和身份验证
            - 提供基本服务功能
            - 安全保护和风险防范

            2. 设备权限说明
            我们可能需要使用以下设备权限：
            - 手机状态：用于识别设备信息
            - 存储权限：用于保存必要的用户数据

            3. 信息安全
            我们承诺：
            - 采用业界先进的安全技术保护您的信息
            - 不会将您的信息用于未经授权的用途
            - 仅在必要的时间内保留您的信息

            您可以通过系统设置随时管理或撤销您的授权。
          </text>
        </scroll-view>
        <view class="popup-btns">
          <button class="btn-reject" @click="handlePrivacyReject">不同意</button>
          <button class="btn-agree" @click="handlePrivacyAgree">同意</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: '', // 自动获取的手机号
      inputPhone: '', // 手动输入的手机号
      verifyCode: '', // 验证码
      countDown: 0, // 验证码倒计时
      showVerifyCode: false, // 是否显示验证码输入框
      isPrivacyAgreed: false, // 是否同意隐私协议
      showPrivacy: false, // 是否显示隐私弹窗
	  platform: '', // 平台标识
	  userInfo: {
	    avatar: '',
	    nickname: '',
	    phone: ''
	  },
    }
  },
  
  onLoad(options) {
	console.log("login　load...")
    if (options.showPrivacy) {
      this.showPrivacy = true
    }
	console.log("login　this.showPrivacy:",this.showPrivacy)
	this.checkPlatform()
    this.getPhoneNumber()
  },
  
  methods: {
	isValidPhoneNumber(phoneNumber) {
	  // 使用正则表达式校验手机号
	  const phoneRegex = /^1[3-9]\d{9}$/;
	  return phoneRegex.test(phoneNumber);
	},
	checkPlatform() {
	  // #ifdef APP-PLUS
	  const platform = plus.os.name.toLowerCase()
	  console.log("获取平台....:",platform)
	  // if (platform === 'android') {
	  //   // 检查是否为鸿蒙系统
	  //   plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
	  //     const ua = widgetInfo.version
		 //  console.log("checkPlatform...ua:",ua)
	  //     if (ua.indexOf('HarmonyOS') > -1) {
	  //       this.platform = 'harmony'
	  //     } else {
	  //       this.platform = 'android'
	  //     }
	  //   })
	  // } else {
	    this.platform = platform
	  // }
	  // #endif
	  if(!this.platform){
		  this.platform = 'web'
	  }
	  console.log("checkPlatform...platform:",this.platform)
	}, 
    
    // 获取手机号
    async getPhoneNumber() {
      // #ifdef APP-PLUS
      try {
		console.log("获取手机号　this.platform....:",this.platform)
        if (this.platform === 'harmony') {
          // 鸿蒙系统获取手机号
          await this.getHarmonyPhoneNumber()
        } else {
          // 其他系统获取手机号
		   console.log('getAppPhoneNumber===')
          await this.getAppPhoneNumber()
		   console.log('getAppPhoneNumber===:',this.phoneNumber)
        }
      } catch (error) {
        console.log('获取手机号失败:', error)
      }
      // #endif
    },    
    // 鸿蒙系统获取手机号
    getHarmonyPhoneNumber() {
      return new Promise((resolve, reject) => {
        try {
          // 使用系统能力获取手机号
          plus.harmony.invoke('getPhoneNumber', {}, (result) => {
            if (result.code === 0 && result.phoneNumber) {
              this.phoneNumber = result.phoneNumber
              resolve(result.phoneNumber)
            } else {
              reject(new Error('获取手机号失败'))
            }
          })
        } catch (error) {
          reject(error)
        }
      })
    },    
    // APP获取手机号
    getAppPhoneNumber() {
      return new Promise((resolve, reject) => {
        plus.device.getInfo({
          success: function(deviceInfo) {
            resolve(deviceInfo.phoneNumber)
          },
          fail: function(error) {
            reject(error)
          }
        })
      })
    },        
    
    // 格式化手机号
    formatPhone(phone) {
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    },
    
    // 发送验证码
    async sendVerifyCode() {
      if (this.countDown > 0) return
      
      const phone = this.inputPhone
      if (!phone || !/^1\d{10}$/.test(phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      
      // TODO: 调用发送验证码API
      
      // 开始倒计时
      this.countDown = 60
      const timer = setInterval(() => {
        this.countDown--
        if (this.countDown <= 0) {
          clearInterval(timer)
        }
      }, 1000)
      
      this.showVerifyCode = true
    },
    
    // 处理登录
    async handleLogin() {
		console.log("handleLogin....isPrivacyAgreed:",this.isPrivacyAgreed)
      if (!this.isPrivacyAgreed) {
        uni.showToast({
          title: '请先同意隐私政策',
          icon: 'none'
        })
        return
      }
      
      try {
        let loginResult
		console.log("handleLogin..platform===:",this.platform,this.phoneNumber)
        if (this.phoneNumber) {
          // 一键登录
		  console.log("一键登录..platform:",this.platform,this.phoneNumber)
          if(this.platform){
			 if (this.platform === 'harmony') {
				 console.log("harmony==== ")
			   loginResult = await this.harmonyLogin()
			 } else{
				 console.log("normalLogin==== ")
				  loginResult = await this.normalLogin()
			 }
		  }else{
			  console.log("normalLogin====1")
			 loginResult = await this.normalLogin()
		  }
	
        } else {
          // 验证码登录
		  console.log('验证码登录====',this.inputPhone)
          if (!this.inputPhone ) {//|| !this.verifyCode
            uni.showToast({
              title: '请输入手机号',
              icon: 'none'
            })
            return
          }
		  if(!this.isValidPhoneNumber(this.inputPhone) ){
		  	uni.showToast({
		  	  title: '请输入手机号和验证码',
		  	  icon: 'none'
		  	})
		  	return
		  }		
		  this.phoneNumber = this.inputPhone
          loginResult = await this.verifyCodeLogin()
        }
		console.log('登录成功处理:', loginResult)
		const lastFour = this.phoneNumber.slice(-4);
		this.userInfo = { phone: this.phoneNumber, nickname: 'user'+lastFour,avatar:'' }
		uni.setStorageSync('userInfo', JSON.stringify(this.userInfo));
        // 登录成功处理
        if (loginResult) {
			console.log('登录成功处理indexindexindex:')
			this.toIndex();
        }
      } catch (error) {
		  console.log('登录失败:', error.message)
        uni.showToast({
          title: error.message || '登录失败',
          icon: 'none'
        })
      }
    },    
	toIndex(){
		uni.switchTab({
		  url: '/pages/index/index',
		    success: () => {
		      console.log('跳转成功')
		    },
		    fail: (err) => {
		      console.error('跳转失败:', err)
		    }
		  })   
	},
    // 鸿蒙系统登录
    harmonyLogin() {
		console.log("harmonyLogin....:",platform)
      return new Promise((resolve, reject) => {
        try {
          plus.harmony.invoke('login', {
            phoneNumber: this.phoneNumber
          }, (result) => {
            if (result.code === 0) {
              resolve(result)
            } else {
              reject(new Error(result.message || '登录失败'))
            }
          })
        } catch (error) {
          reject(error)
        }
      })
    },    
	// 其他平台登录
	normalLogin() {
		console.log("normalLogin....:",this.platform)
	  return new Promise((resolve, reject) => {
	    // TODO: 实现普通登录逻辑
		resolve(true)
	  })
	},
	
	// 验证码登录
	verifyCodeLogin() {
		console.log("verifyCodeLogin....:",this.platform)
	  return new Promise((resolve, reject) => {
	    // TODO: 实现验证码登录逻辑
		resolve(true)
	  })
	},    	
    // 隐私协议相关方法
    handlePrivacyChange(e) {
      this.isPrivacyAgreed = e.detail.value.includes('agreed')
    },
    
    handlePrivacyAgree() {
      this.isPrivacyAgreed = true
      this.showPrivacy = false
      uni.setStorageSync('privacy_agreed', true)
    },
    
    handlePrivacyReject() {
      // #ifdef APP-PLUS
      plus.runtime.quit()
      // #endif
      
      // #ifdef H5 || MP
      uni.showModal({
        title: '提示',
        content: '您需要同意隐私政策才能使用本应用',
        showCancel: false
      })
      // #endif
    },
    
    showPrivacyPopup() {
      this.showPrivacy = true
    },
    
    showUserAgreement() {
      // TODO: 显示用户协议
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
    position: fixed; // 固定定位
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 180rpx 40rpx;
    background: #fff;
    overflow: hidden; 
  
  .header {
    margin-bottom: 80rpx;
    
    .welcome {
      font-size: 48rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
      display: block;
    }
    
    .sub-title {
      font-size: 28rpx;
      color: #999;
    }
  }
  
  .phone-section {
    margin-bottom: 60rpx;
    
    .phone-info {
      text-align: center;
      
      .phone {
        font-size: 40rpx;
        color: #333;
        margin-bottom: 20rpx;
        display: block;
      }
      
      .tip {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .manual-input {
      .input-item {
        display: flex;
        align-items: center;
        height: 100rpx;
        border-bottom: 1px solid #eee;
        margin-bottom: 30rpx;
        
        .prefix {
          font-size: 32rpx;
          color: #333;
          margin-right: 20rpx;
        }
        
        input {
          flex: 1;
          height: 100%;
          font-size: 32rpx;
        }
        
        .verify-btn {
          font-size: 28rpx;
          color: #007AFF;
          padding: 20rpx;
          
          &.disabled {
            color: #999;
          }
        }
      }
    }
  }
  
  .login-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background: #007AFF;
    color: #fff;
    font-size: 32rpx;
    border-radius: 45rpx;
    margin-bottom: 40rpx;
    
    &[disabled] {
      background: #ccc;
    }
  }
  
  .privacy-agreement {
    display: flex;
    align-items: flex-start;
    padding: 0 20rpx;
    
    .agreement-text {
      flex: 1;
      font-size: 24rpx;
      color: #666;
      margin-left: 10rpx;
      line-height: 1.6;
      
      .link {
        color: #007AFF;
      }
    }
  }
  
  .privacy-popup {
    position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.6);
     z-index: 999;
     display: flex;
     align-items: center;
     justify-content: center;
    
    .popup-content {
      width: 80%;
      max-width: 600rpx;
      max-height: 80vh; // 最大高度为视口高度的80%
      background: #fff;
      border-radius: 20rpx;
      padding: 40rpx;
      display: flex;
      flex-direction: column;    
      
      .popup-title {
         font-size: 36rpx;
         font-weight: bold;
         text-align: center;
         margin-bottom: 30rpx;
         flex-shrink: 0; // 防止标题被压缩     
      }
      
      .popup-body {
         flex: 1; // 占据剩余空间
         overflow-y: auto; // 内容可滚动
         margin-bottom: 30rpx;
         
         .privacy-text {
           font-size: 28rpx;
           color: #666;
           line-height: 1.6;
         }    
      }
      
      .popup-btns {
        display: flex;
        justify-content: space-between;
        flex-shrink: 0; // 防止按钮被压缩      
        
        button {
          width: 45%;
          height: 80rpx;
          line-height: 80rpx;
          font-size: 32rpx;
          border-radius: 40rpx;        
          
          &.btn-reject {
          background: #f5f5f5;
          color: #666;
          }
          
          &.btn-agree {
          background: #007AFF;
          color: #fff;
          }
        }
      }
    }
  }
}
</style>